<template>
  <view class="content">
    <view class="header">
      <view class="heartratechart">
        <view class="heartratechartTop">
          <view>
            <text>大傻春</text>
          </view>
          <view style="display:flex; align-items: center;">
            <image style="width:32rpx;height:32rpx;border-radius: 50%;" src="../static/image/pagesDelivery/delimg.png"
              mode="scaleToFill" />
            <text>删除</text>
          </view>
        </view>
        <view class="chartsBox">
          <view style="width: 300rpx;height: 300rpx;">
            <l-echart ref="chartRef" @finished="init"></l-echart>
          </view>

          <view class="chartsBoxRight">
            <view class="chartsBoxRight2">最低心率 76 次/分</view>
            <view class="chartsBoxRight3">最高心率 82 次/分</view>
          </view>
        </view>
        <view class="heartratechartBottom">
          <p>
            全天平均心率
            <span style="color: #066DF7 ;">67次</span>
          </p>
          <p style="color: #16D356; font-weight: 600;">正常</p>
        </view>
      </view>
    </view>
    <view style="background-color: white; padding:32rpx; border-radius:12rpx; margin-top:18rpx;">
      <view style="display: flex; justify-content:space-between;">
        <view style="display: flex; align-items:center;">
          <u-icon name="heart-fill" color="#066DF7" size="28"></u-icon>
          <text style="color: #066DF7; margin-left:10rpx;">心率</text>
        </view>
        <view>
          <text style="color: #16D356;">正常</text>
        </view>
      </view>
      <view style="margin-top:14rpx;">
        <view style="font-family: PingFang SC, PingFang SC;font-weight: bold;font-size: 32rpx;color: #000000;">

          73次<text style="font-size: 20rpx;">/mid</text>
        </view>
        <view
          style="font-family: PingFang SC, PingFang SC;font-weight: 400;font-size: 28rpx;color: #999999;margin-bottom:20rpx;">
          今天
        </view>
        <view class="" style="width: 650rpx;height: 103rpx; margin-top: 10rpx;">
          <l-echart ref="Blood" @finished="init"></l-echart>
        </view>
      </view>
    </view>
    <view style="background-color: white; padding:32rpx; border-radius:12rpx; margin-top:18rpx;">
      <view style="display: flex; justify-content:space-between;">
        <view style="display: flex; align-items:center;">
          <image style="width:28rpx;height:28rpx;" src="../static/image/pagesHealth/Bloodpressure.png"
            mode="scaleToFill" />
          <text style="margin-left:8rpx;">血压（低压）</text>
        </view>
        <view>
          <text style="color: #16D356;">正常</text>
        </view>
      </view>
      <view style="margin-top:14rpx;">
        <view style="font-family: PingFang SC, PingFang SC;font-weight: bold;font-size: 32rpx;color: #000000;">
          95<text style="font-size: 20rpx;">mmHg</text>
        </view>
        <view style="font-family: PingFang SC, PingFang SC;font-weight: 400;font-size: 28rpx;color: #999999;">
          今天
        </view>
        <view class="" style="width: 622rpx;height:102rpx; margin-top: 10rpx;">
          <l-echart ref="pressure" @finished="init"></l-echart>
        </view>
      </view>
    </view>
    <view style="background-color: white; padding:32rpx; border-radius:12rpx; margin-top:18rpx;">
      <view style="display: flex; justify-content:space-between;">
        <view style="display: flex; align-items:center;">
          <image style="width:28rpx;height:28rpx;" src="../static/image/pagesHealth/Bloodpressure.png"
            mode="scaleToFill" />
          <text style="margin-left:8rpx;">血压（高压）</text>
        </view>
        <view>
          <text style="color: #16D356;">正常</text>
        </view>
      </view>
      <view style="margin-top:14rpx;">
        <view style="font-family: PingFang SC, PingFang SC;font-weight: bold;font-size: 32rpx;color: #000000;">
          <text style>130</text>
          <text style="font-size: 20rpx;">mmHg</text>
        </view>
        <view style="font-family: PingFang SC, PingFang SC;font-weight: 400;font-size: 28rpx;color: #999999;">
          今天
        </view>
        <view class="" style="width: 650rpx;height: 103rpx; margin-top: 10rpx;">
          <l-echart ref="highpressure" @finished="init"></l-echart>
        </view>
      </view>
    </view>
    <view style="background-color: white; padding:32rpx; border-radius:12rpx; margin-top:18rpx;">
      <view style="display: flex; justify-content:space-between;">
        <view style="display: flex; align-items:center;">
          <image style="width:24rpx;height:28rpx;" src="../static/image/pagesHealth/oxygen.png" mode="scaleToFill" />
          <text>血氧</text>
        </view>
        <view>
          <text style="color: #16D356;">正常</text>
        </view>
      </view>
      <view style="margin-top:14rpx;">
        <view style="font-family: PingFang SC, PingFang SC;font-weight: bold;font-size: 32rpx;color: #000000;">
          73次<text style="font-size: 20rpx;">/mid</text>
        </view>
        <view style="font-family: PingFang SC, PingFang SC;font-weight: 400;font-size: 28rpx;color: #999999;">
          今天
        </view>
        <view class="" style="width: 650rpx;height: 103rpx; margin-top: 10rpx;">
          <l-echart ref="oxygenpressure" @finished="init"></l-echart>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
export default {
  data() {
    return {
      // 心率
      option: {
        series: [
          {
            type: 'gauge',
            // 仪表盘指针
            pointer: {
              show: false
            },
            // 仪表盘开始角度
            startAngle: 220,
            // 仪表盘结束角度
            endAngle: -40,
            // 展示当前进度
            progress: {
              show: true,
              overlap: false,
              roundCap: true,
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'blue' // 0% 处的颜色
                    },
                    {
                      offset: 0.5,
                      color: 'yellow' // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: 'red' // 100% 处的颜色
                    }
                  ],
                  global: false // 缺省为 false
                }
              }
            },
            // 仪表盘轴线
            axisLine: {
              roundCap: true,
              lineStyle: {
                width: 10
              }
            },
            // 分隔线
            splitLine: {
              show: false
            },
            // 刻度
            axisTick: {
              show: false
            },
            // 刻度标签
            axisLabel: {
              show: false
            },
            // 数据
            data: [
              {
                value: 60,
                name: '心率',
                title: {
                  color: '#485BFF',
                  fontSize: 10,
                  offsetCenter: ['0%', '20%']
                },
                detail: {
                  color: '#000',
                  valueAnimation: false,
                  fontSize: 16,
                  offsetCenter: ['0%', '-20%']
                }
              }
            ]
          }
        ]
      },
      // 心率
      options: {
        // 图表的间距
        grid: {
          // left: '0%',
          // right: '0%',
          bottom: '0%',
          top: '0%',
          // height:'100%',
          containLabel: true,
          // backgroundColor:'#16D356'
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['0点', '1点', '2点', '3点', '4点', '5点', '6点', '7点', '8点', '9点', '10点', '11点', '12点', '13点', '14点', '15点', '16点', '17点', '18点', '19点', '20点', '21点', '22点', '23点', '24点'],
            axisLine: {
              show: false
            },
            axisLabel: {
              show: true
            },
            axisTick: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            // title: '我的设备',
            show: true,
            type: 'value',
            axisLine: {
              show: false
            },
            splitLine: {
              show: true,
            },
            axisLabel: {
              show: false // 隐藏 Y 轴的标签
            }
          }
        ],
        series: [
          {
            type: 'line',
            // 是否平滑
            smooth: false,
            // 去掉标记点
            showSymbol: false,
            // 数据的区域
            // areaStyle: {
            //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //     {
            //       offset: 0,
            //       color: 'white'
            //     },
            //     {
            //       offset: 1,
            //       color: 'rgb(0, 0, 0, 0)'
            //     }
            //   ])
            // },
            lineStyle: {
              color: '#0057FF' // 设置曲线的颜色为绿色
            },
            data: [80, 230, 80, 230, 80, 230, 80, 230, 80, 230, 80, 230, 80, 230, 80, 230, 80, 230, 80, 230, 80, 230, 80, 230, 80, 230, 140, 120, 100, 60, 0, 30, 230, 30, 210, 20, 40, 180, 160, 100, 160, 140, 120, 100, 60]
          },
        ],

      },
      // 血压
      optionpressure: {
        // backgroundColor: '#343434',
        // 图表的间距
        grid: {
          // left: '0%',
          // right: '0%',
          bottom: '0%',
          top: '0%',
          // height:'100%',
          containLabel: true,

        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['0点', '1点', '2点', '3点', '4点', '5点', '6点', '7点', '8点', '9点', '10点', '11点', '12点', '13点', '14点', '15点', '16点', '17点', '18点', '19点', '20点', '21点', '22点', '23点', '24点'],
            axisLine: {
              show: false,
              lineStyle: {
                color: '#004080',
                type: 'dashed', // 设置为虚线
              },
            },
            axisLabel: {
              show: true
            },
            axisTick: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            // title: '我的设备',
            show: true,
            type: 'value',
            // splitNumber: 4, // 设置y轴分割为6行
            axisLine: {
              show: false,

            },
            splitLine: {
              show: true,
            },
            axisLabel: {
              show: false // 隐藏 Y 轴的标签

            },
            splitArea: {
              show: true,
              areaStyle: {
                color: [
                  'rgba(255, 255, 255, 1)',
                  'rgba(255, 255, 255, 1)',
                  'rgba(0, 255, 0, 0.11)',
                  'rgba(0, 255, 0, 0.11)',
                  'rgba(255, 255, 255, 1)',
                  'rgba(255, 255, 255, 1)',
                ]
              }
            }

          }
        ],
        series: [
          {
            type: 'line',
            // 是否平滑
            smooth: true,
            // 去掉标记点
            showSymbol: false,
            // 数据的区域
            // areaStyle: {
            //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //     {
            //       offset: 0,
            //       color: 'white'
            //     },
            //     {
            //       offset: 1,
            //       color: 'rgb(0, 0, 0, 0)'
            //     }
            //   ])
            // },
            lineStyle: {
              color: '#16D356' // 设置曲线的颜色为绿色
            },
            data: [0, 80, 300, 30, 210, 20, 40, 180, 160, 100, 160, 140, 120, 100, 60, 0, 30, 230, 30, 210, 20, 40, 180, 160, 100, 160, 140, 120, 100, 60, 0, 30, 230, 30, 210, 20, 40, 180, 160, 100, 160, 140, 120, 100, 60]
          },
        ]
      },
      optionhigh: {
        // 图表的间距
        grid: {
          // left: '0%',
          // right: '0%',
          bottom: '0%',
          top: '0%',
          // height:'100%',
          containLabel: true,
          // backgroundColor:'#16D356'
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['0点', '1点', '2点', '3点', '4点', '5点', '6点', '7点', '8点', '9点', '10点', '11点', '12点', '13点', '14点', '15点', '16点', '17点', '18点', '19点', '20点', '21点', '22点', '23点', '24点'],
            axisLine: {
              show: false
            },
            axisLabel: {
              show: true
            },
            axisTick: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            // title: '我的设备',
            show: true,
            type: 'value',
            axisLine: {
              show: false
            },
            splitLine: {
              show: true,
            },
            axisLabel: {
              show: false // 隐藏 Y 轴的标签

            },
            splitArea: {
              show: true,
              areaStyle: {
                color: [
                  'rgba(255, 255, 255, 1)',
                  'rgba(255, 255, 255, 1)',
                  'rgba(0, 255, 0, 0.11)',
                  'rgba(0, 255, 0, 0.11)',
                  'rgba(255, 255, 255, 1)',
                  'rgba(255, 255, 255, 1)',
                ]
              }
            }
          }
        ],
        series: [
          {
            type: 'line',
            // 是否平滑
            smooth: true,
            // 去掉标记点
            showSymbol: false,
            // 数据的区域
            // areaStyle: {
            //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //     {
            //       offset: 0,
            //       color: 'white'
            //     },
            //     {
            //       offset: 1,
            //       color: 'rgb(0, 0, 0, 0)'
            //     }
            //   ])
            // },
            lineStyle: {
              color: '#16D356' // 设置曲线的颜色为绿色
            },
            data: [0, 30, 300, 30, 210, 20, 40, 180, 160, 100, 160, 140, 120, 100, 60, 0, 30, 230, 30, 210, 20, 40, 180, 160, 100, 160, 140, 120, 100, 60, 0, 30, 230, 30, 210, 20, 40, 180, 160, 100, 160, 140, 120, 100, 60]
          },
        ]
      },
      optionoxygen: {
        // 图表的间距
        grid: {
          // left: '0%',
          // right: '0%',
          bottom: '0%',
          top: '0%',
          // height:'100%',
          containLabel: true,
        },
        backgroundColor: 'rgba(255,193,35,0.15)',
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['0点', '1点', '2点', '3点', '4点', '5点', '6点', '7点', '8点', '9点', '10点', '11点', '12点', '13点', '14点', '15点', '16点', '17点', '18点', '19点', '20点', '21点', '22点', '23点', '24点'],
            axisLine: {
              show: false
            },
            axisLabel: {
              show: true
            },
            axisTick: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            // title: '我的设备',
            show: false,
            type: 'value',
            axisLine: {
              show: false
            },
            splitLine: {
              show: true,
            },
            axisLabel: {
              show: false // 隐藏 Y 轴的标签
            }
          }
        ],
        series: [
          {
            type: 'line',
            // 是否平滑
            smooth: true,
            // 去掉标记点
            showSymbol: false,
            // 数据的区域
            // areaStyle: {
            //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //     {
            //       offset: 0,
            //       color: 'white'
            //     },
            //     {
            //       offset: 1,   
            //       color: 'rgb(0, 0, 0, 0)'
            //     }
            //   ])
            // },
            lineStyle: {
              color: 'orange' // 设置曲线的颜色为绿色
            },
            data: [0, 30, 230, 30, 210, 20, 40, 180, 160, 100, 160, 140, 120, 100, 60, 0, 30, 230, 30, 210, 20, 40, 180, 160, 100, 160, 140, 120, 100, 60, 0, 30, 230, 30, 210, 20, 40, 180, 160, 100, 160, 140, 120, 100, 60]
          },
        ]
      }
    };
  },
  mounted() {

  },
  methods: {
    async init() {
      // chart 图表实例不能存在data里
      const chart = await this.$refs.chartRef.init(echarts);
      chart.setOption(this.option)
      const BloodChart = await this.$refs.Blood.init(echarts)
      BloodChart.setOption(this.options)
      const Bloodpressure = await this.$refs.pressure.init(echarts)
      Bloodpressure.setOption(this.optionpressure)
      const highpressure = await this.$refs.highpressure.init(echarts)
      highpressure.setOption(this.optionhigh)
      const oxygenpressure = await this.$refs.oxygenpressure.init(echarts)
      oxygenpressure.setOption(this.optionoxygen)
    }
  }


};
</script>

<style scoped lang="scss">
.content {
  padding: 0 32rpx 18rpx 32rpx;
  min-height: 100vh;
  background: #f5f5f5;

  .header {
    .heartratechart {
      width: 686rpx;
      height: 448rpx;
      background: #ffffff;
      border-radius: 12rpx 12rpx 12rpx 12rpx;
      position: relative;

      .heartratechartTop {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 32rpx;


      }

      .chartsBox {
        width: 686rpx;
        height: 236rpx;
        padding-top: 30rpx;
        display: flex;
        justify-content: space-around;
        align-items: center;

        .chartsBoxLeft {
          width: 236rpx;
          height: 236rpx;
        }

        .charts {
          width: 236rpx;
          height: 236rpx;
        }

        .chartstwo {
          width: 622rpx;
          height: 150rpx;
        }

        .chartsBoxRight {
          width: 268rpx;
          height: 176rpx;

          .chartsBoxRight1 {
            width: 268rpx;
            height: 48rpx;
            background: #fafaff;
            margin-bottom: 10rpx;
          }

          .chartsBoxRight2 {
            width: 268rpx;
            height: 48rpx;
            background: #fafaff;
            margin-bottom: 10rpx;
          }

          .chartsBoxRight3 {
            width: 268rpx;
            height: 48rpx;
            background: #fafaff;
            margin-bottom: 10rpx;
          }
        }
      }

      .heartratechartBottom {

        height: 40rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 32rpx;

      }
    }

    .centerBox {
      width: 686rpx;
      height: 1088rpx;
      background: #ffffff;
    }
  }
}
</style>